<template>
  <div class="content">
    <van-nav-bar
     title="添加设备"
     left-text="返回"
     left-arrow
     @click-left="onClickLeft"
   />
    <div class="add-content">
      <div class="add-top">
          <div class="add-font">设备部署：</div>
          <div :class="`img-font ${active==1?'active':''}`" @click="imgClk(1, require('../../assets/dxq.png'))">
            <div class="device-img"><img src="../../assets/dxq.png" /></div>
            <div>读卡器</div>
          </div>
          <div :class="`img-font ${active==2?'active':''}`"  @click="imgClk(2, require('../../assets/tx.png'))">
            <div class="device-img"><img src="../../assets/tx.png" /></div>
            <div>天线</div>
          </div>
          <div :class="`img-font ${active==3?'active':''}`"  @click="imgClk(3, require('../../assets/hlq.png'))">
            <div class="device-img"><img src="../../assets/hlq.png" /></div>
            <div>合路器</div>
          </div>
      </div>
      <div class="canvas">
        <canvas-img 
          ref="canvas"
          id="canvasId" 
          :floor="true" 
          :plus="true"
          :width="canvasWidth"
          :height="canvasHeight"
          @save="save"
          @openPoup="openPoup"
          :active="active"
          ></canvas-img>
      </div>
      <van-popup
        position="bottom"
        :style="{ height: '100%',background:'rgba(0,0,0,0.3)' }"  :overlay="false"
        v-model="showPopup" >
          <div class="tips-bg">
            <div class="tips-header">
              <van-button class="tips-btn" size="small" @click="onCancel">取消</van-button>
              <div class="tips-bg-btn">
                <van-button class="tips-btn" color="orange" :disabled="iconIndex ===-1" @click="delDevice" size="small">删除设备</van-button>
                <van-button class="tips-btn" style="margin-right: 0;" color="#5ec94a" @click="save" size="small">保存</van-button>
              </div>
            </div>
            <van-form ref="form">
              <div class="form-item">
                <van-field
                  readonly
                  clickable
                  label="室分系统："
                  :value="selectedOption.text1"
                  placeholder="请选择"
                  @click="openPop(1)"
                  >
                </van-field>
                <van-icon name="arrow-down" ></van-icon>
              </div>
              <div class="form-item">
                <van-field
                  readonly
                  clickable
                  label="合路器名称："
                  :value="selectedOption.text2"
                  placeholder="请选择"
                  @click="openPop(2)"
                  >
                </van-field>
                <van-icon name="arrow-down" ></van-icon>
              </div>
              <div class="form-item">
                <van-field
                  readonly
                  clickable
                  label="天线名称："
                  :value="selectedOption.text3"
                  placeholder="请选择"
                  @click="openPop(3)"
                  >
                </van-field>
                <van-icon name="arrow-down" ></van-icon>
              </div>
              <div class="form-item">
                <van-field
                v-model="selectedOption.snCode"
                type="text"
                id="reader"
                label="SN码："
                placeholder="请输入SN码"
                ></van-field>
                <!-- <van-icon name="scan" ></van-icon> -->
              </div>
              <div class="form-item start">
                <van-field
                v-model="photo"
                type="label"
                label="施工拍照："
                ></van-field>
                <van-uploader
                  :after-read="afterRead"
                  capture="camera"
                  multiple
                />
              </div>
              <van-popup v-model="showSfxt" position="bottom" :style="{ height: '40%' }">
                <van-cell-group inset>
                  <van-cell 
                    v-for="(option, index) in options" 
                    :key="index" 
                    :title="option.text" 
                    @click="selectOption(option)"
                  />
                </van-cell-group>
              </van-popup>
            </van-form>
          </div>
        </van-popup>
    </div>
  </div>
</template>

<script>
import floorImg  from '../../assets/floor.png';
import dxq  from '../../assets/dxq.png';

import tx  from '../../assets/tx.png';
import hlq  from '../../assets/hlq.png';
import { Dialog } from 'vant'
import testApi from '@/api/test.js'
import canvasImg from '@/components/canvasImg'
export default {
  name: 'addDevices',
  components:{
    dxq, 
    tx, 
    hlq,
    canvasImg
  },
  data() {
    return {
      active: 0,
      value: '',
      canvas:null,
      ctx:null,
      startX:0,
      startY:0,
      endX:0,
      endY:0,
      dragable:false,
      offsetX:0,
      offsetY:0,
      singleClick:true,
      img:null,
      iconImg:null,
      timer:null,
      showPopup:false,
      selectedOption: {},
      showSfxt:false,
      options: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' },
        { text: '选项3', value: '3' }
      ],
      showPopups:false,
      selectType:'',
      scale:1,
      photo:'',
      pointList:[],
      initialDistance:0,
      scaleFactor:1,
      iconEdit:false,
      iconIndex:-1,
      html5Qrcode:null,
      detailData:{},
      canvasWidth:0,
      canvasHeight:0
    };
  },
  created(){
    if(this.$route.query){
      this.detailData = this.$route.query;
      this.canvasWidth = window.screen.width;
      this.canvasHeight = window.screen.height -310;
    }
  },
  methods: {
    openPoup(){
      this.showPopup=true;
    },
    showPicker() {
      this.showPopups = true;
    },
    onPickerConfirm(value) {
      this.selectedValue = value[0];
      this.showPopups = false;
    },
    onPickerCancel() {
      this.showPopups = false;
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
    },
    onCancel() {
      this.showPopup = false;
    },
    imgClk(type, url){
      this.iconImg = url;
      if(this.active==type){
        this.active = -1;
        this.iconImg = null;
      }else{
        this.active = type;
        this.$refs.canvas.imgClk(type,url)
      }
    },
    onChange(){

    },
    selectOption(option) {
      if(this.selectType==1){
        this.selectedOption.text1 = option.text;
        this.selectOption.value1 = option.value;
      }else if(this.selectType==2){
        this.selectedOption.text2 = option.text;
        this.selectOption.value2 = option.value;

      }else{
        this.selectedOption.text3 = option.text;
        this.selectOption.value3 = option.value;

      }
      this.showSfxt = false;
    },
    openPop(type){
      this.selectType = type;
      if(type)
      this.showSfxt = true
    },
    zoomIn(){
      this.scale += 0.1;
      this.drawImg();
    },
    zoomOut(){
      this.scale -= 0.1;
      this.drawImg();
     
    },
    moveImg(e){
      this.img = new Image();
      this.img.src = floorImg;
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      let radio = Math.max( this.canvas.width/this.img.width , this.canvas.height/this.img.height);
      this.ctx.drawImage(this.img, e.changedTouches[0].clientX - this.startX,  e.changedTouches[0].clientY - this.startY, this.img.width*radio*this.scale, this.img.height*radio*this.scale);
      this.img.width = this.img.width*radio*this.scale;
      this.img.height = this.img.height*radio*this.scale;
      this.drawIconHistory();
    },
    /**
     * 删除设备
    */
    delDevice(){
      Dialog.confirm({
        title: "提示",
        message: "是否确定删除该点位?"
      }).then(() => {
        this.pointList.splice(this.iconIndex, 1);
        this.showPopup = false;
        this.iconIndex = -1;
        this.drawImg();
      }).catch(() => {});
    },
    /**
     * idsId 室分系统id
     * manufactureCompany 生产企业
     * address 安装地址
     * latitude 经度
     * longitude 维度
     * onlineStatus 在线状态
     * parentId 父级设备
     * installStatus 设备状态
     * equipmentType 设备分类
     * 
     * deviceType 设备类型
     * deviceName 设备名称
     * idsId 室分系统id
     * deviceResourceId 设备资源id
     * deviceNum 设备编码/设备运维id
     * drawingLocation 图片地址
     * deviceSn 设备SN码
     */
    save(selectedOption){
      // this.detailData.deviceSn = selectedOption.snCode;

      this.detailData.deviceSn = this.$refs.canvas.selectedOption.snCode;
      testApi.addInstall(this.detailData).then(res=>{

      })
    },
    afterRead(file) {
      // 在这里处理文件，例如上传到服务器
      // 可以使用 FormData 上传文件

      const formData = new FormData();
      formData.set("file", file.file);
      console.log(33333, formData.get('file'))


      testApi.uploadFile(formData.get('file')).then(response => {
        // 处理响应数据
        console.log(response);
      })
      .catch(error => {
        // 处理错误
        console.error( error);
      });
    }
  },
};
</script>

<style scoped lang="less">
.content{
  user-select: none;
  overflow: hidden;
}
  .add-content{
    font-size: 16px;
  }

  .add-top{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px;
  }
  .add-font{
    font-size: 16px;
    padding: 0 3px;
  }
  .img-font{
    text-align: center;
    font-size: 12px;
    padding: 3px 5px;
    width: 40px;
  }
  .img-font.active{
    box-shadow: 0 0 3px #000;
    background: rgba(0,0,0,0.1);
  }
  .canvas{
    /* border:1px solid red; */
    box-shadow: 0 0 3px #999;
    height: 100%;
    width: 100%;
    overflow: hidden;

  }
  .tips-bg{
    background: #fff;
    height: 50%;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .tips-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:10px;
  }
  .tips-bg-btn{
    display: flex;
  }
  .tips-btn{
    width: 100px;
    margin-right: 10px;
  }
  .devices-btn{
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction:column;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    border-top: 1px solid  rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
    button{
      border: 1px solid rgba(0,0,0,0.3);
      border-radius: 0;
      border-top: none;
      &:first-child{
        height: 30px;
      }
      &:last-child{
        height: 30px;
      }
    }
    
  }
  .devices-btn-right{
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction:column;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    border-top: 1px solid  rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
    button{
      border: 1px solid rgba(0,0,0,0.3);
      border-radius: 0;
      border-top: none;
      &:first-child{
        height: 30px;
      }
      &:last-child{
        height: 30px;
      }
    }
  }
  .display-flex{
    display: flex;
    justify-content: space-between;
  }
  .form-item{
    display: flex;
    justify-content: space-between;
    .van-icon-arrow-down:before{
      font-size: 16px;
      margin-right:20px;
    }
    .van-icon-scan, .van-icon-photograph{
      font-size: 16px;
      margin-right: 20px;
      margin-top: 10px;
    }
    &.start{
      justify-content: flex-start;
      .van-cell{
        width: 120px;
      }
    }
  }
  .device-img{
    img{
      height: 20px;
    }
  }
</style>